<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.min.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="app">
    <h1>排行榜</h1>
    <hr>

        <table class="table table-striped">
            <tr v-for="tmp in page.records">
                <td><a :href="'content.html?id='+tmp.id">{{tmp.title}}</a></td>
                <td><a :href="'content.html?id='+tmp.id">{{tmp.author}}</a></td>
                <td><a :href="'content.html?id='+tmp.id">{{tmp.createTime}}</a></td>
            </tr>
        </table>
    </div>
</div>
</body>
<script>
    var params = window.location.search;
    var s = params.substr(1, params.length);
    var arr = s.split("=");
    var hisId=arr[1];

    var vm = new Vue({
        el: "#app",
        data: {
            page: {},
        },
        methods: {

        },
        mounted(){
            $.ajax({
                url: "http://localhost:8080/news/rinking",
                data: {
                    hisId:hisId
                },
                success: function (data){
                    vm.page = data;
                },
                error: function (err){
                    alert(err);
                }
            });
        }
    });
</script>
</html>